<template>
	<picker @change="handlePickerChange" :value="activeIndex" range-key="dictLabel" :range="levelList">
		<view class="input">{{activeLevelName}}</view>
	</picker>
</template>

<script>
	import { getDicts as getDicts } from '@/api/system/dict/data'
	export default {
		name: 'DefectLevelPicker',
		model: {
			prop: 'level',
			event: 'input'
		},
		data() {
			return {
				activeIndex: 0,
				levelList: []
			}
		},
		props: {
			level: {
			  type: String,
			  default: 'middle'
			}
		},
		computed: {
			/** 结果的等级显示名称 */
			activeLevelName: function() {
				const level = this.levelList[this.activeIndex];
				return level?level.dictLabel:'';
			},
		},
		onReady() {
			this.getLevelList();
		},
		methods: {
			/** 获取等级集合 */
			getLevelList() {
				getDicts('defect_level').then(res=>{
					this.levelList = res.data;
					res.data.forEach((level,index)=>{
						if(level.dictValue===this.level) {
							this.activeIndex = index;
							this.emit();
						}
					})
				})
			},
			/**处理等级选择改变 */
			handlePickerChange(e) {
				this.activeIndex = e.detail.value;
				this.emit();
			},
			/** 更新父组件传递的v-model */
			emit() {
				this.$emit('input', this.levelList[this.activeIndex].dictValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.defect-state-flag {
		flex-shrink: 0;
	}
</style>